<template>
  <div>
      <header1></header1>
      <div class="head">
          <span>美团账号登录</span>
          <span>手机验证登录</span>
      </div>
      <div class="con">
          <input type="text" placeholder="账户名/手机号/Email">
          <input type="text" placeholder="请输入您的密码">
      </div>
      <div class="login">登录</div>
      <div class="nav">
          <span>立即注册</span>
          <span>找回密码</span>
      </div>
      <div class="footer">© 猫眼电影 客服电话：<span>400-670-5335</span></div>
  </div>
</template>

<script>
import header1 from "@/components/commonh/header1"

export default {
  name: "login",
  components: {
    header1,
  }
};
</script>

<style>
.head{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
}
.head span{
  text-align: center;
  line-height: 50px;
}
.head span:first-of-type{
  border-bottom: 5px solid #FFC300;
}
.con input{
  width: 100%;
  height: 40px;
  display: block;
  border: none;
  padding-left: 20px;
}
.login{
  width: 80%;
  height: 30px;
  margin: 20px auto;
  text-align: center;
  color: #fff;
  background-color: #df2d2d;
  font-size: 18px;
  text-align: center;
  line-height: 30px;
}
.nav{
  display: flex;
  justify-content:space-around;
}
.nav span{
  font-size: 14px;
  color: #FE8C00;
}
.footer{
  margin: 10px auto;
  font-size: 14px;
  text-align: center;
}
.footer span{
  color: #df2d2d;
}
</style>